import React from 'react';
import { connect } from 'dva'
import queryString from 'query-string'
import { Card,Tabs } from 'antd';
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import List from "./List";
import OrderFilterExpand from 'components/Filter/OrderFilterExpand';
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand';

const bills = ({ location, dispatch, bill, loading }) => {
  location.query = queryString.parse(location.search);
  const { items, pagination, currentItem, isExpand ,currentType} = bill;
  const TabPane = Tabs.TabPane;

  const breadcrumbList = [
    {
      title: '财务管理',
      href: '/'
    }, {
      title: '财务流水',
      href: '/financialBill'
    }
  ];
  const listProps = {
    dataSource: items,
    loading: loading.effects['bill/query'],
    pagination,
    pageChangeAction: 'bill/query',
    dispatch,
    location,
    onShowDetail(record) {
      dispatch({
        type: 'bill/showDetail',
        payload: {
          recordId: record.billId,
          billType: record.billType
        }
      });
    }
  };

  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'num',
        title: '收付款单编号'
      },  {
        type: 'select',
        id: 'paymentType',
        title: '支付方式',
        options: [
          {
            value: 'alipay_pc_direct',
            name: '线上支付(支付宝)'
          },
          {
            value: 'wx_pub_qr',
            name: '线上支付(微信)'
          }, {
            value: '线上支付',
            name: '线上支付'
          },{
            value: 'POS',
            name: 'POS'
          }
          , {
            value: '丽维家-其他',
            name: '丽维家-其他'
          }
          , {
            value: '丽维家JD',
            name: '丽维家JD'
          }
          , {
            value: '丽维家TM',
            name: '丽维家TM'
          }
          , {
            value: '丽维家微信',
            name: '丽维家微信'
          }
          , {
            value: '丽维家支付宝',
            name: '丽维家支付宝'
          }
          , {
            value: '付款返充',
            name: '付款返充'
          }
          , {
            value: '微信公众号扫码支付',
            name: '微信公众号扫码支付'
          }
          , {
            value: '扫码',
            name: '扫码'
          }
          , {
            value: '支付中心',
            name: '支付中心'
          }
          , {
            value: '支付宝 PC 网页支付',
            name: '支付宝 PC 网页支付'
          }
          , {
            value: '现金',
            name: '现金'
          }
          , {
            value: '网银转账',
            name: '网银转账'
          }
          , {
            value: '调账',
            name: '调账'
          }
          , {
            value: '天猫',
            name: '天猫'
          }
          , {
            value: '京东',
            name: '京东'
          }
          , {
            value: '支付宝',
            name: '支付宝'
          }
        ]
      }, {
        type: 'input',
        id: 'handlerName',
        title: '操作人'
      },
      {
        type: 'dateRule',
        id: 'handleTime',
        dateFormat: 'YYYY/MM/DD HH:mm:ss',
        title: '操作时间'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'bill/query',
        payload: {
          ...value
        }
      })
    },
    isExpand,
    noExpand() {
      dispatch({ type: 'bill/unExpandFilter', payload: {} })
    },
    expand() {
      dispatch({ type: 'bill/expandFilter', payload: {} })
    }
  }
  const tabChange = (key) => {
    dispatch({
      type: 'bill/setCurrentTab',
      payload:key
    })
    dispatch({
      type: 'bill/query'
    })
  }

  return (
    <PageHeaderLayout title="财务流水" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>
        <OrderFilterUnExpand {...filterProps} />
        <Tabs onChange={tabChange} type="card" activeKey={currentType}>
            <TabPane tab="余额账户" key="SALES">
              <List {...listProps} />
            </TabPane>
            <TabPane tab="第三方账户" key="THIRD">
              <List {...listProps} />
            </TabPane>
            <TabPane tab="优惠券账户" key="COUPON">
              <List {...listProps} />
            </TabPane>
          </Tabs>
      </Card>
    </PageHeaderLayout>

  )
};

export default connect(({ bill, loading }) => ({ bill, loading }))(bills)
